<template>
	<view>
		<scroll-view scroll-x class="bg-white nav fixed">
			<view class='flex text-center'>
				<view class="cu-item flex-sub text-df " @click="navselect(index,item.status)"
					v-for="(item,index) in navlist" :key="index"
					:class="[index == currentIndex ? 'text-blue cur' : '']">{{item.text}}
				</view>
			</view>
		</scroll-view>
		<view v-if="total[currentIndex] != 0">
			<view v-for="(orderdetail,index) in order_list" :key="index">
				<view class="bg-white margin-sm padding-sm solids-bottom shadow radius text-content"
					@click="readDetail(orderdetail.id)">
					<view class="flex justify-between" style="margin-top: 80rpx;">
						<view class="text-bold" style="flex-shrink: 0;">
							<text class="text-red">{{ orderdetail.orderStatus == '0'?'待支付':'' }}</text>
							<text class="text-green">{{ orderdetail.orderStatus == '1'?'已支付':'' }}</text>
							<text class="text-red">{{ orderdetail.orderStatus == '2'?'已接单':'' }}</text>
							<text class="text-red">{{ orderdetail.orderStatus == '3'?'待取货':'' }}</text>
							<text class="text-red">{{ orderdetail.orderStatus == '4'?'派送中':'' }}</text>
							<text class="text-blue">{{ orderdetail.orderStatus == '5'?'已完成':'' }}</text>
							<text class="text-grey">{{ orderdetail.orderStatus == '6'?'已取消':'' }}</text>
						</view>
						<view @click.stop="paste(orderdetail.orderNo)">
							<text class="icon-goods padding-right-sm"></text>
							<text class="text-bold solids-bottom">{{ orderdetail.orderNo }}</text>
						</view>
					</view>
					<view>
						<view class="bg-white margin-xs padding-xs shadow radius text-content"
							v-for="(item,index) in orderdetail.detailsList" :key="index">
							<view class="flex padding-top-sm solids-top">
								<image :src="imagePrefix + item.dishImage" style="flex-shrink: 0;" mode="aspectFill"
									class="shadow cover radius solids"></image>
								<view class="flex text-content padding-left justify-between" style="flex-grow: 1;">
									<view>{{ item.dishName }}</view>
									<view style="flex-shrink: 0;">
										<view>￥{{ item.dishPrice }}</view>
										<view class="text-grey text-center">×{{item.quantity}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-end">
						<view style="margin-right: 310rpx;">{{ orderdetail.updateTime }}</view>
						<view>合计{{ orderdetail.paymentAmount }}元</view>
					</view>
					<view class="flex justify-end" style="font-size: 24upx;">
<!-- 						<view v-if="orderdetail.orderStatus == '5' ">
							<button @click.stop="toReviews(orderdetail.id)"
								class="round lines-grey cu-btn shadow mid margin-right-sm">追加评价</button>
						</view> -->
						<view v-if="orderdetail.orderStatus == '5'">
							<button @click.stop="toReviews(orderdetail.id)"
								class="round lines-grey cu-btn shadow mid margin-right-sm">评价</button>
						</view>
						<view v-if="orderdetail.orderStatus == '1' ">
							<view class="round cu-btn lines-grey mid shadow margin-right-sm"
								@click.stop="cancel(orderdetail.id,orderdetail.orderNo)">取消订单</view>
						</view>
						<view v-if="orderdetail.orderStatus == '0' ">
							<view class="round cu-btn lines-grey mid shadow margin-right-sm"
								@click.stop="cancel(orderdetail.id,orderdetail.orderNo)">取消订单</view>
							<view class=" round cu-btn lines-orange mid shadow" @click.stop="goDetail(orderdetail.id)">
								立即付款</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-bottom: 50upx;">
				<uni-pagination :total="total[currentIndex]" pageSize="10" :current="pages" @change="paginat">
				</uni-pagination>
			</view>
		</view>
	</view>

</template>

<script>
	import uniPagination from "@/components/uni-pagination/uni-pagination.vue"
	import {
		getUserOrdersInfo,
		cancelOrders
	} from '@/api/system/orders.js'
	import {
		onRenderTriggered
	} from "vue"

	export default {
		data() {
			return {
				imagePrefix: this.$imagePrefix,
				navlist: [{
						text: "全部",
						status: 100
					},
					{
						text: "待支付",
						status: 0
					},
					{
						text: "已支付",
						status: 1
					}, {
						text: "待接单",
						status: 2
					}, {
						text: "待取货",
						status: 3
					}, {
						text: "派送中",
						status: 4
					},
					{
						text: "已完成",
						status: 5
					},
					{
						text: "已取消",
						status: 6
					}
				],
				status: 100, //订单状态是100是查得全部订单列表
				currentIndex: 0,
				pages: 1,
				order_list: [],
				//各类订单的总数
				total: {},
				orderStatus: '', //此对象为用户信息，实际线上环境为vuex中的全局对象，像后端请求数据十需要使用
				orderDetailList: [],
			}
		},
		components: {
			uniPagination
		},
		onShow() {
			this.getUserOrders()
		},
		methods: {
			getUserOrders() {
				getUserOrdersInfo(this.status).then(res => {
					this.order_list = res.data;
				})
			},
			//支付订单
			goDetail(orderId) {
				console.log('dddddid:' + orderId);
				this.$tab.navigateTo('/pages/orderDetail/index?orderId=' + orderId); // 通过 URL 参数传递 orderId
			},
			//查看订单
			readDetail(orderId) {
				// 添加 readonly=true 参数表示只读模式
				this.$tab.navigateTo('/pages/orderDetail/index?orderId=' + orderId + '&readonly=true');
			},

			// 取消订
			cancel(orderId, orderNo) {
				console.log('idid:' + orderNo)
				// 1. 先弹出确认框
				this.$modal.confirm(`是否确认取消订单号为 "${orderNo}"？`).then(() => {
					// 2. 用户确认后，调用取消接口
					cancelOrders(orderId).then(res => {
						console.log('取消成功:', res);
						this.$modal.msgSuccess("订单已取消");
						// 3. 刷新订单列表
						this.getUserOrders();
					})
				}).catch(err => {
					// 4. 处理错误（包括用户取消确认和接口错误）
					if (err !== 'cancel') { // 排除用户手动取消的情况
						console.error('取消订单失败:', err);
						this.$modal.msgError("取消订单失败，请重试");
					}
				});
			},
			navselect(index, status) {
				this.currentIndex = index
				this.status = status
				this.getUserOrders()
			},

			// 评价
			toReviews(orderId) {
				this.$tab.navigateTo('/pages/orderList/reviews/reviews?orderId=' + orderId); // 通过 URL 参数传递 orderId
			}
		}
	}
</script>

<style>
	.cover {
		width: 150upx;
		height: 150upx;
	}
</style>